<div *ngIf="node.colors" class="colors-panel">
    <div #background class="background"></div>

    <div class="panel">
        <input (colorPickerChange)="colorPickerChange('backgroundColor', $event)"
               (cpToggleChange)="colorPickerToggleChange($event, 'backgroundColor', node.colors.background)"
               [(colorPicker)]="node.colors.background"
               [cpPositionOffset]="'-500%'"
               [cpPresetColors]="options.presetColors"
               [cpPresetLabel]="''"
               [cpWidth]="options.width"
               [style.background]="node.colors.background"
               [title]="'TOOLTIPS.NODE_COLOR' | translate"
               class="background-color"
               cpPosition="left"/>
        <input (colorPickerChange)="colorPickerChange('nameColor', $event)"
               (cpToggleChange)="colorPickerToggleChange($event, 'nameColor', node.colors.name)"
               [(colorPicker)]="node.colors.name"
               [cpPositionOffset]="'-500%'"
               [cpPresetColors]="options.presetColors"
               [cpPresetLabel]="''"
               [cpWidth]="options.width"
               [style.background]="node.colors.name"
               [title]="'TOOLTIPS.TEXT_COLOR' | translate"
               class="text-color"
               cpPosition="left"/>
        <input (colorPickerChange)="colorPickerChange('branchColor', $event)"
               (cpToggleChange)="colorPickerToggleChange($event, 'branchColor', node.colors.branch)"
               *ngIf="node.colors.branch"
               [(colorPicker)]="node.colors.branch"
               [cpPositionOffset]="'-500%'"
               [cpPresetColors]="options.presetColors"
               [cpPresetLabel]="''"
               [cpWidth]="options.width"
               [style.background]="node.colors.branch"
               [title]="'TOOLTIPS.BRANCH_COLOR' | translate"
               class="branch-color"
               cpPosition="left"/>
    </div>
</div>
